const app = getApp()

var present = ""

Page({
  data: {
    tt: '',
    imgTempURL: '', 
    ColorList: app.globalData.ColorList,
    backgroundColor:'#000000',
    color: "#fadbd9",
    red: 0, 
    lime: 0, 
    blue: 0, 
    },
  
  // bindtest: function() {
  //   var that = this;
  //   wx.request({
  //     url: 'http://127.0.0.1:5000/json', //本地服务器地址
  //     data: { //data中的参数值就是传递给后台的数据
  //       transInfo: '呐，这是小程序端给后台的数据'
  //     },
  //     method: 'get',
  //     // header: {
  //     //   'content-type': 'images/jpeg' //默认值
  //     // }, 
  //     success: function(res) { //res就是接收后台返回的数据
  //       wx.getFileSystemManager()
  //       that.setData({
  //         tt: res.data.result
  //       });
  //       console.log(res.data);
  //     },
  //     fail: function(res) {
  //       console.log("失败");
  //     }
  //   })
  // },

  changeColor: function(e) {
    const id = e.currentTarget.dataset.operation;
    wx.downloadFile({
      url: 'http://127.0.0.1:5000/imgTest?picID='+app.globalData.ColorList[id].name,
      header: 'images/png',
      success: ( res ) => {
        this.setData({
          imgTempURL: res.tempFilePath
        })
      }
    })
    var that = this;
    this.setData({
      backgroundColor: app.globalData.ColorList[id].color,
      red:app.globalData.ColorList[id].r,
      lime:app.globalData.ColorList[id].g,
      blue:app.globalData.ColorList[id].b
    })
    this.drawCircle1(app.globalData.ColorList[id].r*2/255);
    this.drawCircle2(app.globalData.ColorList[id].g*2/255);
    this.drawCircle3(app.globalData.ColorList[id].b*2/255);
    console.log(id)
  },

  onReady: function() {
    this.drawProgressbg1();
    this.drawCircle1(2);
    this.drawProgressbg2();
    this.drawCircle2(2);
    this.drawProgressbg3();
    this.drawCircle3(2)
  },
  
  drawCircle1: function (step){  
    var context = wx.createCanvasContext('canvasProgress1',this);
      // 设置渐变
      var gradient = context.createLinearGradient(200, 100, 100, 200);
      gradient.addColorStop("0", "#2661DD");
      gradient.addColorStop("0.5", "#40ED94");
      gradient.addColorStop("1", "#5956CC");
      
      context.setLineWidth(5);
      context.setStrokeStyle(gradient);
      context.setLineCap('round')
      context.beginPath(); 
      // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
      context.arc(110, 110, 40, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
      context.stroke(); 
      context.draw() 
  },
  drawProgressbg1: function(){
    // 使用 wx.createContext 获取绘图上下文 context
    var ctx = wx.createCanvasContext('canvasProgressbg1',this)
    ctx.setLineWidth(4);// 设置圆环的宽度
    ctx.setStrokeStyle('#DCDCDC'); // 设置圆环的颜色
    ctx.setLineCap('round') // 设置圆环端点的形状
    ctx.beginPath();//开始一个新的路径
    ctx.arc(110, 110, 40, 0, 2 * Math.PI, false);
    //设置一个原点(110,110)，半径为100的圆的路径到当前路径
    ctx.stroke();//对当前路径进行描边
    ctx.draw();
  },
  drawCircle2: function (step){  
    var context = wx.createCanvasContext('canvasProgress2',this);
      // 设置渐变
      var gradient = context.createLinearGradient(200, 100, 100, 200);
      gradient.addColorStop("0", "#2661DD");
      gradient.addColorStop("0.5", "#40ED94");
      gradient.addColorStop("1", "#5956CC");
      
      context.setLineWidth(5);
      context.setStrokeStyle(gradient);
      context.setLineCap('round')
      context.beginPath(); 
      // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
      context.arc(110, 110, 40, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
      context.stroke(); 
      context.draw() 
  },
  drawProgressbg2: function(){
    // 使用 wx.createContext 获取绘图上下文 context
    var ctx = wx.createCanvasContext('canvasProgressbg2',this)
    ctx.setLineWidth(4);// 设置圆环的宽度
    ctx.setStrokeStyle('#DCDCDC'); // 设置圆环的颜色
    ctx.setLineCap('round') // 设置圆环端点的形状
    ctx.beginPath();//开始一个新的路径
    ctx.arc(110, 110, 40, 0, 2 * Math.PI, false);
    //设置一个原点(110,110)，半径为100的圆的路径到当前路径
    ctx.stroke();//对当前路径进行描边
    ctx.draw();
  },
  drawCircle3: function (step){  
    var context = wx.createCanvasContext('canvasProgress3',this);
      // 设置渐变
      var gradient = context.createLinearGradient(200, 100, 100, 200);
      gradient.addColorStop("0", "#2661DD");
      gradient.addColorStop("0.5", "#40ED94");
      gradient.addColorStop("1", "#5956CC");
      
      context.setLineWidth(5);
      context.setStrokeStyle(gradient);
      context.setLineCap('round')
      context.beginPath(); 
      // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
      context.arc(110, 110, 40, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
      context.stroke(); 
      context.draw() 
  },
  drawProgressbg3: function(){
    // 使用 wx.createContext 获取绘图上下文 context
    var ctx = wx.createCanvasContext('canvasProgressbg3',this)
    ctx.setLineWidth(4);// 设置圆环的宽度
    ctx.setStrokeStyle('#DCDCDC'); // 设置圆环的颜色
    ctx.setLineCap('round') // 设置圆环端点的形状
    ctx.beginPath();//开始一个新的路径
    ctx.arc(110, 110, 40, 0, 2 * Math.PI, false);
    //设置一个原点(110,110)，半径为100的圆的路径到当前路径
    ctx.stroke();//对当前路径进行描边
    ctx.draw();
  },
})

